<!--  -->
<template>
  <div class="login-wrap">
    <a-row id="login-row">
      <a-col :xs="1" :sm="3" :md="5" :lg="6" :xl="10" :xxl="13"></a-col>
      <a-col
        :xs="22"
        :sm="18"
        :md="14"
        :lg="12"
        :xl="9"
        :xxl="6"
        id="login-col"
      >
        <a-form-model
          id="components-form-demo-normal-login"
          class="login-container"
          ref="ruleForm"
          :model="model"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          v-if="pre"
        >
          <a-form-model-item class="login-title">
            <div>
              <img src="@/assets/logo.png" alt="" />
              <h1>{{ LOGO_TITLE }}</h1>
            </div>
          </a-form-model-item>
          <a-tabs
            default-active-key="2"
            class="tabs mt-20"
            size="large"
            :tabBarGutter="80"
            :tabBarStyle="{
              'text-align': 'center',
            }"
            @tabClick="tabClick"
            v-model="activeKey"
          >
            <a-tab-pane key="1">
              <span slot="tab">
                <a-icon type="cloud" />
                登录
              </span>
              <a-form-model-item ref="username" label="" prop="username">
                <a-input
                  placeholder="请输入用户名/手机号/电子邮箱"
                  v-model="model.username"
                  allowClear
                  size="large"
                >
                  <a-icon
                    slot="prefix"
                    type="user"
                    style="color: rgba(0, 0, 0, 0.25)"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item ref="password" label="" prop="password">
                <a-input
                  type="password"
                  placeholder="请输入密码"
                  v-model="model.password"
                  allowClear
                  size="large"
                >
                  <a-icon
                    slot="prefix"
                    type="lock"
                    style="color: rgba(0, 0, 0, 0.25)"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item ref="captcha" label="" prop="captcha">
                <div class="remember">
                  <a-input
                    class="captcha"
                    placeholder="请输入验证码"
                    v-model="model.captcha"
                    allowClear
                    size="large"
                  >
                    <a-icon
                      slot="prefix"
                      type="message"
                      style="color: rgba(0, 0, 0, 0.25)"
                    />
                  </a-input>
                  <img
                    class="captcha-img"
                    :src="captchaBase64"
                    @click="captcha"
                  />
                </div>
              </a-form-model-item>
              <a-form-model-item>
                <a-button
                  type="primary"
                  html-type="submit"
                  class="login-form-button"
                  :loading="loginLoading"
                  @click="handleSubmit(1)"
                >
                  {{ loginLoading ? "登录中..." : "登 录" }}
                </a-button>

                <div class="remember">
                  <a-checkbox v-model="remember">记住密码</a-checkbox>
                  <a @click="forgot"> 忘记密码？ </a>
                </div>
              </a-form-model-item>
            </a-tab-pane>

            <a-tab-pane key="2">
              <span slot="tab">
                <a-icon type="smile" />
                注册
              </span>
              <a-form-model-item ref="username" label="" prop="username">
                <a-input
                  placeholder="请输入用户名"
                  v-model="model.username"
                  allowClear
                  size="large"
                >
                  <a-icon
                    slot="prefix"
                    type="user"
                    style="color: rgba(0, 0, 0, 0.25)"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item ref="password" label="" prop="password">
                <a-input
                  type="password"
                  placeholder="请输入密码"
                  v-model="model.password"
                  allowClear
                  size="large"
                >
                  <a-icon
                    slot="prefix"
                    type="lock"
                    style="color: rgba(0, 0, 0, 0.25)"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item ref="phone" label="" prop="phone">
                <a-input
                  placeholder="请输入手机号"
                  v-model="model.phone"
                  allowClear
                  size="large"
                  class="pr-10"
                >
                  <a-icon
                    slot="prefix"
                    type="phone"
                    style="color: rgba(0, 0, 0, 0.25)"
                  />
                </a-input>
              </a-form-model-item>
              <a-form-model-item ref="captcha" label="" prop="captcha">
                <div class="flex j-c-sb a-i-c">
                  <a-input
                    placeholder="请输入验证码"
                    v-model="model.captcha"
                    allowClear
                    size="large"
                    class="pr-10"
                  >
                  </a-input>
                  <a-button
                    @click="sendPhone"
                    :loading="sendLoading"
                    :disabled="isSend"
                    >{{
                      isSend ? sendTime + "秒后重新发送" : "发送验证码"
                    }}</a-button
                  >
                </div>
              </a-form-model-item>

              <a-form-model-item>
                <a-button
                  type="primary"
                  html-type="submit"
                  class="login-form-button"
                  :loading="loginLoading"
                  @click="handleSubmit(2)"
                >
                  {{ loginLoading ? "注册中..." : "立即注册" }}
                </a-button>
              </a-form-model-item>
            </a-tab-pane>
          </a-tabs>
        </a-form-model>
      </a-col>
      <a-col :xs="1" :sm="3" :md="5" :lg="6" :xl="5" :xxl="5"></a-col>
    </a-row>
    <Footer class="footer"></Footer>
    <Forgot ref="Forgot" @handleOk="handleOk"></Forgot>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as AesUtil from "@/utils/AesUtil";
import Footer from "@/layout/footer";
import { model, rules } from "./save";
import { LOGO_TITLE } from "@/config";
import { wechat, qq, alipay, alipayCircle } from "@/config/icon";
// import WxLogin from "./component/WxLogin";
import { getBase64 } from "@/utils/FileUtil";
import Forgot from "./component/Forgot";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  //import引入的组件需要注入到对象中才能使用
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Footer,
    Forgot,
    // WxLogin,
  },
  data() {
    //这里存放数据
    return {
      // 服务接口
      api: {
        // login: "/auth/login", // 登录接口
        captcha: "/admin_server/oauth/captcha", // 验证码接口
        registerMc: "/admin_server/oauth/registerMc", // 注册接口
      },
      captchaBase64: "",
      remember: false,
      labelCol: { span: 1 },
      wrapperCol: { span: 30 },
      model,
      rules,
      loginLoading: false,
      LOGO_TITLE,
      wechat,
      qq,
      alipay,
      alipayCircle,
      activeKey: "1",
      isSend: false,
      sendLoading: false,
      sendTimer: undefined,
      sendTime: 0,
      pre: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleOk() {
      this.$refs.Forgot.close();
    },
    forgot() {
      this.$refs.Forgot.init(undefined, "重置密码");
    },
    tabClick(key) {
      this.activeKey = key;
      this.pre = false;
      this.$nextTick(() => {
        this.pre = true;
      });
    },
    async sendPhone() {
      if (!this.model.phone) {
        this.$message.error("请输入手机号");
        return;
      }
      if (this.sendTime !== 0) {
        return;
      }
      this.sendLoading = true;
      const { success } = await this.$commonApi.sendPhone({
        phone: this.model.phone,
      });
      if (success) {
        this.isSend = true;
        this.$message.success("已发送");
        this.sendTime = 60;
        let that = this;
        this.sendTimer = setInterval(() => {
          that.sendTime--;
          if (that.sendTime === 0) {
            clearInterval(that.sendTimer);
            that.sendTime = 0;
            that.isSend = false;
          }
        }, 1000);
      }
      this.sendLoading = false;
    },
    wxLogin() {
      // this.$refs.WxLogin.init("", '微信扫码登录');
      this.$message.info("正在建设中");
    },
    qqLogin() {
      this.$message.info("正在建设中");
    },
    zfbLogin() {
      this.$message.info("正在建设中");
    },
    async handleSubmit(flag) {
      // eslint-disable-next-line no-unused-vars
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loginLoading = true;
          const rsa = await this.$commonApi.rsaPublicKey();
          if (!rsa.success) {
            this.loginLoading = false;
            return;
          }
          const password = this.model.password;
          // AES密钥
          let aeskey = AesUtil.createAesKey();
          this.model.password = AesUtil.AESEncrypt(this.model.password, aeskey);
          this.model.encryptKey = AesUtil.RSAEncrypt(aeskey, rsa.result);
          if (flag === 1) {
            this.$store
              .dispatch("LOGIN", this.model)
              .then(() => {
                this.loginLoading = false;
                this.$router.push("/");
              })
              .catch(() => {
                this.loginLoading = false;
                this.model.password = password;
                this.captcha();
              });
          } else {
            const { success } = await this.$request.post2(
              this.api.registerMc,
              this.model
            );
            if (success) {
              this.activeKey = "1";
              this.model.captcha = undefined;
              this.$message.success("注册成功!请登录");
            } else {
              this.model.password = password;
            }
            this.loginLoading = false;
          }
        }
      });
    },
    /**
     * 获取验证码
     */
    captcha() {
      this.$request.downFile1(this.api.captcha).then(async (res) => {
        if (res.status === 200) {
          this.captchaBase64 = await getBase64(res.data);
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.captcha();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.remember {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabs {
  /* text-align: center; */
}

#components-form-demo-normal-login .login-title {
  text-align: center;
  height: 32px;
  margin: 16px;
}

#components-form-demo-normal-login .login-title img {
  height: 32px;
  margin: 10px;
}

#components-form-demo-normal-login .login-title h1 {
  font-size: 18px;
  font-weight: 600;
  /* vertical-align: middle; */
  display: inline-block;
  line-height: 32px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-wechat {
  text-align: center;
}

#components-form-demo-normal-login .captcha {
  width: 55%;
}

#components-form-demo-normal-login .captcha-img {
  width: 40%;
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-size: 18px;
}

.agreement {
  text-align: center;
}

#login-row #login-col {
  /* background-color: rgb(247, 248, 248); */
  padding: 30px;
}

.footer {
  text-align: center;
}

.login-wrap {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding-top: 5%;
  background-color: #112346;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  background-image: url("@/assets/img/login-bg.png");
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  /* width: 350px; */
  padding: 0px 35px 15px 35px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(5px);
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
</style>
